iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 22
2
Modern Web

讓0基礎的你也能製作簡單wordpress主題系列 第 22

[Day22] 想為wordpress主題加入搜尋功能?看這篇你就會了

  • 分享至 

  • xImage
  •  

搜尋是一個很重要的功能,透過搜尋功能,用家可以快速查找他們希望獲得的內容,不過究竟該怎樣為你的wordpress主題,加設搜尋功能?

加入搜尋欄位

我們在加入搜尋功能前,需要先加入一個搜尋欄位。我們希望搜尋欄位可以出現在bootstrap選單中,所以,我們所以把編碼:<?php get_search_form();?> 放到之前在header的bootstrap編碼內,這樣,就會有搜尋欄位自動生成了。

編碼節錄:

<?php
wp_nav_menu( array(
'theme_location'  => 'primary',
'depth'           => 0, // 1 = no dropdowns, 2 = with dropdowns.
'container'       => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id'    => 'bs-example-navbar-collapse-1',
'menu_class'      => 'navbar-nav mr-auto ',
'fallback_cb'     => 'WP_Bootstrap_Navwalker::fallback',
'walker'          => new WP_Bootstrap_Navwalker(),
) );
?>
<?php get_search_form();?>

結果

搜尋欄位加入後,會出現在選單右邊位置

加入搜尋結果頁面

你現在隨意搜尋你文中有的字眼,你會發現,只會出現一個空白頁。這是因為我們還沒有設定search.php的檔案。由於都是把結果列出的關係,我們可以直接採用之前在archive.php 所製作好的loop,並放到這裡去。

不過現在,當用家搜尋字眼時,並不會有相應的標題,出現在搜尋結果的面板內。這裡,我們可以透過編碼,來達成這目的:

編碼

<h3 class="mt-3 mb-4 text-secondary text-center"> Search result for: "<?php echo get_search_query(false);?>" </h3>

你會見到這裡我們也是採用着echo,來把文字顯示出來。而透過wordpress編碼:get_search_query ,標題就會跟著用家搜尋的字眼而改變,例如用家搜尋"工作",那麼標題就會出現"工作"。我們在前方加入了文字: Search result for: " " ,那麼出來的結果就會是Search result for: " 工作 " 最後我們可以加入bootstrap,作美化用。

關於true 與 false

雖然這點較為細微,不過還是可以說說。使用了true後,wordpress就會以連結的的方式來處理我們的文字,並且wordpress會加密連結,以加強連結的安全性,他們稱之為escaping。假若false的話,則只會當作一般文字處理。雖然影響不是那麼大,但還是建議當只是簡單加入文字標題時,使用false而不是true,來減少wordpress系統不必要的處理。不過也不是所有連結也必定需要使用到escaping,假若連結,是完全由wordpress生成,例如像搜尋連結這樣,那麼其實也可以不加入,不過若擔心自己分別清楚,那麼全部連結均加入,也是沒問題的。

當找不到該搜尋結果時會出現的頁面

現在當輸入一個不存在的字眼時,系統會像平常那樣,顯示用家搜尋的字眼,不過因為什麼也搜尋不到,所以會是一個空白頁。不過,我們假若希望為這頁面,有一個獨立的設計,我們可以怎樣做呢?我們可以透過之前常用的if。。else。。end if的php 句式,來做到。

編碼參考:

<?php if ( have_posts() ) : ?>

  <h3 class="mt-3 mb-4 text-secondary text-center"> Search result for: "<?php echo get_search_query(false);?>"  </h3>
  <?php get_template_part('include/content');?>

 <?php else : ?>
   
   <h3 class="mt-3 mb-4 text-secondary text-center "> Sorry , can't find any result</h3>
   
 <?php endif; ?>

這裡就只是一個小參考,您可以在內裡放入任何內容,當然你也可以透過get_template_part,來匯入一個來設計好的php檔案吧。

為搜尋欄位加入個性化設計

現在這樣子確實是不錯,不過若是希望加入之前製作好的bootstrap搜尋欄位呢?或者希望強制讓用家必須要輸入字眼,才能搜尋呢?那麼我們可以怎樣做?這時候,我們就需要加入一個新的檔案searchform.php,在內裡加入相關編碼,來覆蓋wordpress原先的設定。

我們首先像之前那樣,在左邊新增一個檔案,名為searchform.php

編碼

<form id="searchform" method="get" action="<?php echo  home_url( '/' ) ; ?>"
class="form-inline my-2 my-lg-0">
    <input type="search" class="search-field form-control mr-sm-2" name="s" placeholder="Search" value="<?php echo get_search_query(); ?>"required>
    <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
</form>

編碼解釋

你會發現,這裡使用的編碼,其實和bootstrap搜尋欄位的編碼相近,不過在這裡,我們加入了wordpress php 編碼及一些html編碼,讓搜尋欄位能夠配合wordpress系統作使用。

**method="get" **

這是一個html編碼來的。method,主要要來調整,用家輸入的資料,會如何發送。常用的,主要會有post和get這兩種。

get

若使用到get,情況就好像你直接用手拿著現金,到商店購物一樣,誰也會看到你拿著多少錢在手上,誰也能夠看到你現在要傳送什麼資料。不過至少你省卻了錢包的價錢,get也是一樣,是較post成本較低,為便宜的。

雖然是這樣,若你只是拿著很少錢,那麼當然是沒問題,不過若你是拿著一疊銀紙時,問題就大了。大家都看到你手上有著這麼多錢,你也很難叫人不去搶走你的錢吧。所以get也只識合用在傳送無關痛癢的資料上,若是是像信用卡密碼這樣,那麼肯定會很快就不見了。

另外你手上也總不可能能夠拿到這麼多錢吧,那麼get也是這樣,能夠傳送的資料量是有限的。最後,若你天天這樣直接拿著錢,四處走,大家鐵定能夠根據你每天拿錢的量,知道你富不富有吧。那麼get也是一樣,你每次傳送都會紀錄在瀏覽器和server內,我們稱為cache,這樣那些黑客只要番一番你的記錄,就全知道了。所以為何我們用get,應該很清楚吧,因為這只是無關痛癢的搜尋記錄,而且也只是傳送數個字。

post

至於post則像你用著錢包,帶著錢到商店購物一樣,人家是看不到你帶了多少錢的,沒有人知道你傳送了什麼資料。不過,也不是說到真的這麼安全大家還是可以偷到你的錢的,資料也是可以偷到的,只是較為複雜。而因為用了錢包,那麼相較於直接拿著,大家並不知道你是不是真的富有,被偷的風險會較低,post也是一樣,因為資料不會再這麼顯然易見,那麼偷的人就會少點,也會安全點。

最後當然錢包的大少不像手那麼局限的,你也是可以放到大量金錢,那麼post也是一樣,它可以一次傳送大量資料。只是你也需要金錢,去購買錢包,所以某程度上來說,也會較你直接用手拿着,會需要較多的成本,post也是一樣,價格會較貴,不過也正常吧,多一層手續,多一分價格呀。

action="<?php echo home_url( '/' )

action是一個html用語來的,主要是要來指定需要去哪裡,傳送資料的。不過因為用家輸入的網站名稱不同,連結會有不同,所以我們這裡加入了home_url( '/' ),home_url代表著網站網址,/只代表再網站網址後加入/的符號,結果會像這樣www.example.com/ 。部分網站可能會建議加入esc_url,像這樣子

value=""

value是一個html的編碼來的,它在不同情況下,功能不同,在search下,一般是要來在欄位顯示文字的,例如你設定了search,那麼搜尋欄位裡就會看到search這個字,和placeholder的分別在於,這個出來的文字,會是黑色,而不是灰色的。而這裡則有第二個用途,我們加入了,這樣就能夠透過php,讓用家輸入的任何文字,都能夠成為搜尋字眼,要來作搜尋用。

** name="s"**

name是html編碼來的,一般是要來讓網頁管理者,知道用家輸入的資料是,是什麼資料而用的。不過這裡有另一個用途,我們加入了s,這個為wordpress的一個編碼,這樣我們就不再是要讓網頁管理者知道,而是要來讓wordpress系統知道,現在你要使用wordpress系統的搜尋功能。

required

這是html編碼來的,設定後,搜尋欄位必須要輸入文字,才能按搜尋。

設定搜尋特定分類/tag

不過假若您希望搜尋器只能搜尋某個tag或者分類時,又可以怎樣設定?我們可以透過加入額外的編碼來做到。

編碼

<input type="hidden" value="number/name" name="post_type" />

上方的編碼還是依舊需要加入,這裡只是加入了額外的條件,來限制搜尋結果,這個可以重複加入,這樣就可以同時搜尋到數個分類或tag的設定。

假若你希望有數個搜尋系統,而且大家設定不同的話,那麼其實也可以不使用 get_search_form,而是只開設多個類似於searchform的檔案,接著用get_template_par的方法,連接那些你設定好的檔案,以代替 使用get_search_form,這樣你每個版面的搜尋系統,篩選方法就可以不同了

編碼解釋

type="hidden"

主要是要來加入一些額外的條件時用的,通常這些設定,你都不會想給用家在使用時,會直接看到,所以我們需要把它隱藏掉。

value="number/name"

原先,wordpress是什麼資料也會搜尋出來的,我們設定可以為tag number/category number,這樣就能告訴wordpress,我們只希望搜尋到特定的tag或者分類了。不過怎樣知道,分類的tag或者號碼是多少?

當你到設定分類的地方,然後把滑鼠懸浮到那個分類上,例如我現在是要看blog的,那麼就把話說停留在blog上,接著下方就會出現一個連結,你會見到 id=x ,這樣的,x就是它的號碼來了,例如我這裡,blog就會是6。

查看分類號碼的方法非常簡單,只需要留意底部連結裏,id旁邊的數字就可以了

我們亦可以設定為name,那麼直接輸入tag或分類的名字就可以了,不過要注意的是這個更改後,後面的post_type也需要更改。

name= post_type

這個主要看你是要搜尋什麼,我們會需要用到wp_query的參數,來限制會出什麼搜尋結果,設定分類的話可以按這裡查看,一般若是數字的就會是cat,假若是名字的就會是category_name。

而tag的話則可以在這裡查看,一般若是數字的就會是tag_id,假若是名字的就會是tag。此外,裡面亦包括了其他參數,假若需要設定例如作者,留言,頁面等等,裡面亦都有提供。

我們之後會再有文章,詳細談及wp_query的應用,到時大家就會完全明白wp_query了。


上一篇
簡單操作,為你的wordpress主題,加入額外sidebar
下一篇
【DAY 23 】 Wordpress 主題的comment?讓你也能夠著手設定吧
系列文
讓0基礎的你也能製作簡單wordpress主題30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言